<template>
  <el-row>
    <!--Payment start-->
    <el-row>
      <el-col class="toolbar">
        <el-button type="primary" @click="addShow" icon="el-icon-circle-plus-outline"></el-button>
      </el-col>
      <el-table :data="payments" border v-loading="listLoading">
        <el-table-column label="支付方式">
          <template slot-scope="scope">
            <span>{{scope.row.title}}</span>
          </template>
        </el-table-column>
        <el-table-column label="关联模型">
          <template slot-scope="scope">
            <span>{{scope.row.model}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-row type="flex" class="row" justify="space-around">
              <el-col :span="6">
                <el-switch
                  name="paymentStatus"
                  @change="changeStatus(scope.row)"
                  v-model="scope.row.status"
                  active-color="#13ce66"
                  :active-value="1"
                  :inactive-value="0"
                  inactive-color="#ff4949">
                </el-switch>
              </el-col>
              <el-col :span="6">
                <div @click="showEdit(scope.row)">
                  <el-button type="primary" size="mini"><i class="el-icon-edit"></i></el-button>
                </div>
              </el-col>
              <el-col :span="6">
                <div @click="del(scope.row.payment_id)">
                  <el-button type="danger" size="mini"><i class="el-icon-delete"></i></el-button>
                </div>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!--Payment end-->
    <!--edit tab-->
    <el-dialog width="30%" :visible.sync="editVisible">
      <div slot="title" class="dialog-title">编辑</div>
      <el-form :model="payment" label-width="100px">
        <el-form-item label="支付方式">
          <el-input v-model="payment.title" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="关联模型">
          <el-input v-model="payment.model"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEdit(payment)">确 定</el-button>
      </div>
    </el-dialog>
    <!--edit tab-->
    <!--add tab-->
    <el-dialog :visible.sync="addVisible" width="30%">
      <div class="dialog-title" slot="title">新增</div>
      <el-form :model="payment" label-width="100px">
        <el-form-item label="支付方式">
          <el-input v-model="payment.title"></el-input>
        </el-form-item>
        <el-form-item label="关联模型">
          <el-input v-model="payment.model"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="add(payment)">确 定</el-button>
      </div>
    </el-dialog>
    <!--add tab-->



  </el-row>
</template>

<script>
  import { getPayments, addPayment, editPayment, deletePayment } from '../../api/api'

  export default {
    name: 'Payment',
    data () {
      return {
        addVisible: false,
        editVisible: false,
        payments: [],
        listLoading: true,
        payment: {title: '', model: ''}
      }
    },
    methods: {
      getPaymentsList () {
        getPayments().then((res) => {
          this.payments = res.data
          this.listLoading = false
        })
      },
      addShow () {
        this.payment = {}
        this.addVisible = true
      },
      add (param) {
        addPayment(param).then((res) => {
          this.addVisible = false
          if (parseInt(res.status) === 1) {
            this.$message({type: 'success', message: '添加成功'})
            this.getPaymentsList()
          } else {
            this.$message.error('添加失败，错误代码为 ' + res.errorCode)
          }
        })
      },
      changeStatus (row) {
        editPayment(row).then((res) => {
          if (parseInt(res.status) === 1) {
            this.$message({type: 'success', message: '修改成功'})
          } else {
            this.$message.error('修改失败，错误代码为' + res.errorCode)
            row.status = Number(!row.status)
          }
        })
      },
      showEdit (row) {
        this.payment.payment_id = row.payment_id
        this.payment.title = row.title
        this.payment.model = row.model
        this.editVisible = true
      },
      handleEdit (payment) {
        editPayment(payment).then((res) => {
          this.editVisible = false
          if (parseInt(res.status) === 1) {
            this.$message({type: 'success', message: '修改成功'})
          } else {
            this.$message.error('修改失败，错误代码为 ' + res.errorCode)
          }
          this.getPaymentsList()
        })
      },
      del (id) {
        this.$confirm('确定要删除该项吗', '删除操作')
          .then(() => {
            deletePayment(id).then((res) => {
              if (res.status === 1) {
                this.$message({type: 'success', message: '操作成功'})
              } else {
                this.$message.error('操作失败，错误代码:' + res.errorCode)
              }
              this.getPaymentsList()
            })
          })
          .catch(() => {
          })
      }
    },
    mounted () {
      this.getPaymentsList()
    }
  }
</script>

<style scoped lang="sass">

</style>
